<template>
	<div>
		<nav-bar class="nav-bar">
			<div slot="left" class="back" @click="backClick">
				<img src="~assets/img/common/back.svg" alt="">
			</div>
			<div slot="center" class="title">
				<div class="title-item" 
				v-for="(item, index) in titles"
				:class="{active: index === currentIndex}"
				 @click="titleClick(index)">{{item}}</div>
			</div>
		</nav-bar>
	</div>
</template>

<script>
	import NavBar from 'components/common/navbar/NavBar.vue'
	export default{
		name:'DetailNavBar',
		components:{
			NavBar
		},
		data(){
			return{
			 titles:['商品', '参数', '评论', '推荐'],
			 currentIndex:0
			 
			}
		},
		methods:{
			titleClick(index){
				this.currentIndex = index
				this.$emit('NavBarTitle',index)
			},
			backClick(){
					this.$router.back()
			}
		}
	}
</script>

<style scoped>
	.nav-bar{
		font-size: 13px;
	}
	.title{
		display: flex;
	}
	.title-item{
		flex: 1;
	}
	.active{
		color: #FF5577;
	}
	.back img{
		margin: 12px 20px;
	}
</style>
